<template>
  <div class="dashboard">
    <h2 class="page-title">系统概览</h2>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #E6F7FF;">
            <el-icon color="#1890FF" :size="40"><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ summary.total_users || 0 }}</div>
            <div class="stat-label">总用户数</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #F0F5FF;">
            <el-icon color="#722ED1" :size="40"><Shop /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ summary.total_stores || 0 }}</div>
            <div class="stat-label">总商家数</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #FFF7E6;">
            <el-icon color="#FA8C16" :size="40"><Food /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ summary.total_takeouts || 0 }}</div>
            <div class="stat-label">总外卖数</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #F6FFED;">
            <el-icon color="#52C41A" :size="40"><Document /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ summary.total_orders || 0 }}</div>
            <div class="stat-label">总订单数</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 待审核提醒 -->
    <el-row :gutter="20" class="pending-row">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-card class="pending-card" shadow="hover">
          <div class="pending-header">
            <h3>待审核商家</h3>
            <el-tag type="warning" size="large">{{ pending.stores || 0 }}</el-tag>
          </div>
          <div class="pending-action">
            <el-button type="primary" @click="goToStores">立即审核</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-card class="pending-card" shadow="hover">
          <div class="pending-header">
            <h3>待审核外卖</h3>
            <el-tag type="warning" size="large">{{ pending.takeouts || 0 }}</el-tag>
          </div>
          <div class="pending-action">
            <el-button type="primary" @click="goToTakeouts">立即审核</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 今日数据 -->
    <el-row :gutter="20" class="today-row">
      <el-col :span="24">
        <el-card>
          <template #header>
            <h3>今日数据</h3>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="8" :md="8">
              <div class="today-item">
                <div class="today-label">今日订单</div>
                <div class="today-value">{{ today.orders || 0 }}</div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="8" :md="8">
              <div class="today-item">
                <div class="today-label">今日收入</div>
                <div class="today-value">¥{{ today.revenue?.toFixed(2) || '0.00' }}</div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="8" :md="8">
              <div class="today-item">
                <div class="today-label">今日新用户</div>
                <div class="today-value">{{ today.new_users || 0 }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近订单 -->
    <el-row>
      <el-col :span="24">
        <el-card>
          <template #header>
            <h3>最近订单</h3>
          </template>
          <el-table :data="recentOrders" stripe style="width: 100%">
            <el-table-column prop="order_id" label="订单号" width="180" />
            <el-table-column prop="user_name" label="用户" width="120" />
            <el-table-column prop="store_name" label="商家" width="150" />
            <el-table-column prop="takeout_name" label="外卖" />
            <el-table-column prop="price" label="金额" width="100">
              <template #default="scope">
                ¥{{ scope.row.price?.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="时间" width="180" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Shop, Food, Document } from '@element-plus/icons-vue'
import { adminApis } from '@/assets/apis/AdminApis'
import { userInfoStore } from '@/assets/userStore/userStore'

const router = useRouter()
const userStore = userInfoStore()

// 数据
const summary = ref<any>({})
const pending = ref<any>({})
const today = ref<any>({})
const recentOrders = ref<any[]>([])
const loading = ref(false)

// 获取仪表板数据
const fetchDashboardData = async () => {
  loading.value = true
  try {
    const adminId = userStore.id
    const data = await adminApis.getDashboard(adminId)
    
    summary.value = data.summary || {}
    pending.value = data.pending || {}
    today.value = data.today || {}
    recentOrders.value = data.recent_orders || []
  } catch (error: any) {
    console.error('获取仪表板数据失败：', error)
    ElMessage.error(error.error || '获取数据失败')
  } finally {
    loading.value = false
  }
}

// 跳转到商家管理
const goToStores = () => {
  router.push('/admin/stores')
}

// 跳转到外卖管理
const goToTakeouts = () => {
  router.push('/admin/takeouts')
}

onMounted(() => {
  fetchDashboardData()
})
</script>

<style scoped>
.dashboard {
  max-width: 1400px;
}

.page-title {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: #303133;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.pending-row {
  margin-bottom: 20px;
}

.pending-card {
  border-radius: 12px;
}

.pending-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.pending-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.pending-action {
  text-align: right;
}

.today-row {
  margin-bottom: 20px;
}

.today-item {
  text-align: center;
  padding: 15px 0;
}

.today-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.today-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

:deep(.el-card__header) {
  padding: 18px 20px;
}

:deep(.el-card__header h3) {
  margin: 0;
  font-size: 18px;
  color: #303133;
}
</style>

